<template>
  <bs-select v-bind="$attrs" :model-value="modelValue" @update:model-value="handleUpdateValue">
    <bs-option v-for="(item, index) in computedOptions" :key="index" :value="item[computedValueField]" :label="item[computedLabelField]">
      <template v-if="labelNode">
        <component :is="excuteN(labelNode, item)"></component>
      </template>
    </bs-option>
  </bs-select>
</template>
<script setup lang="ts">
import {VNode, computed} from 'vue'

const emit = defineEmits(['update:modalValue'])
type Props = {
  options?: any[]
  labelField?: string
  labelNode?: (item:any) => VNode
  valueField?: string
  modelValue?: any
}

const props = withDefaults(defineProps<Props>(), {
})

const computedValueField = computed(() => {
  return props.valueField || 'value'
})

const computedLabelField = computed(() => {
  return props.labelField || 'label'
})

const computedOptions = computed(() => {
  return props.options || []
})

const handleUpdateValue = (val:any) => {
  emit('update:modalValue', val)
}

const excuteN = (ex: any, ...args:any) => {
  if (ex) {
    return {
      render () {
        return ex(...args) 
      }
    }
  }
}

</script>
